<template>
	<view class="container">
		<view class="personalCenter" style="background-image: url('/static/personalCenter/backgroundv3.png');">
			<!-- 未登录状态 -->
			<view class="login" v-if="!isLogin">
				<text style="color: #fff;">Hi，欢迎来到订花乐</text>
				<text class="loginBtn" @click="goLogin">登录 / 注册</text>
			</view>
			<!-- 已登录状态 -->
			<view class="userInfo" v-else>
				<image class="headImg"
					:src="userInfo.header_img ?userInfo.header_img :'/static/personalCenter/default.png'" mode="">
				</image>
				<!-- <img :src="userInfo.header_img ? userInfo.header_img :'/static/personalCenter/default.png'" alt=""
					class="headImg"> -->
				<text class="userName">{{userInfo.name}}</text>
				<text class="layout" @click="layout">注销</text>
			</view>
			<!-- 订单区域 -->
			<view class="menu">
				<view class="orderAll" @click="goOrder(0)">
					<view>我的订单</view>
					<view style="font-size: 14px;">全部 &gt;</view>
				</view>
				<view class="orderNav">
					<view class="nav-item" v-for="(item,i) in orderList" :key="i" @click="goOrder(item.current)">
						<view class="iconfont" style="font-size: 32px;" v-html="item.icon"></view>
						<text class="text">{{item.title}}</text>
					</view>
				</view>
			</view>
			<!-- 菜单区域 -->
			<view class="menu">
				<view class="menu-item" v-for="(item,i) in menuList" :key="i" @click="go(item.pagePath)">
					<view class="iconfont" v-html="item.icon" style="font-size: 26px;color: #484848;"></view>
					<text class="text">{{item.title}}</text>
					<view class="icon">
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				orderList: [{
						title: '待付款',
						icon: '&#xe706;',
						current: 1
					},
					{
						title: '待收货',
						icon: '&#xe604;',
						current: 2
					},
					{
						title: '待评价',
						icon: '&#xe682;',
						current: 3
					},
					{
						title: '已完成',
						icon: '&#xe62b;',
						current: 4
					},
				],
				menuList: [{
						title: '优惠券',
						icon: '&#xe764;',
						pagePath: '/coupon/coupon'
					},
					{
						title: '收货地址',
						icon: '&#xe60e;',
						pagePath: '/address/address'
					},
					{
						title: '设置',
						icon: '&#xe8b8;',
						pagePath: '/setup/setup'
					},
				],
				isLogin: false
			}
		},
		computed: {
			...mapState('userInfo', ['userInfo']),
			...mapState('tabBar', ['value'])
		},
		onLoad() {},
		onShow() {
			this.changeValue(3)
			this.isLogin = Boolean(this.userInfo)
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			...mapMutations('userInfo', ['setStorage']),
			...mapMutations('cart', ['setshoppingCart']),
			goLogin() {
				uni.navigateTo({
					url: "/login/login"
				})
			},
			layout() {
				setTimeout(() => {
					this.isLogin = false
					this.setshoppingCart([])
					this.setStorage('')
				}, 500)
			},
			go(path) {
				uni.navigateTo({
					url: path
				})
			},
			goOrder(current) {
				uni.navigateTo({
					url: `/order/order?current=${current}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personalCenter {
		height: 1000px;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 150px;
		padding: 12rpx;

		.login {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30px 0;

			.loginBtn {
				width: 32%;
				line-height: 35px;
				text-align: center;
				background-color: #fff;
				margin-top: 15px;
			}
		}

		.userInfo {
			display: flex;
			align-items: center;
			padding: 30px 20rpx;
			position: relative;

			.headImg {
				width: 70px;
				height: 70px;
				border-radius: 50%;
			}

			.userName {
				color: #fff;
				font-size: 16px;
				margin-left: 20rpx;
			}

			.layout {
				position: absolute;
				right: 5%;
				top: 0;
				color: #fff;
			}
		}

		.menu {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 6px;

			.orderAll {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 10px;
				margin-bottom: 15px;
				border-bottom: 1px solid #E9ECF0;
			}

			.orderNav {
				display: flex;
				justify-content: space-around;

				.nav-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.text {
						margin-top: 3px;
					}
				}
			}

			.menu-item {
				display: flex;
				align-items: center;
				font-size: 16px;
				line-height: 50px;
				border-bottom: 1px solid #E9ECF0;
				position: relative;

				.text {
					margin-left: 20rpx;
				}

				.icon {
					position: absolute;
					right: 0;
				}
			}
		}
	}
</style>